<template>
    <div class="box">
      <!-- 图件展示 -->
      <div class="imgShowBox">
        <subheadings :name="'图件展示'" />
        <!-- 向上点击的按钮 -->
        <div class="upBox">
          <img
            @click="onPrev()"
            class="upArrow"
            src="../../assets/images/anbao/up_arrow.png"
            alt=""
          />
        </div>
        <div class="outBox" id="isCont">
          <div class="imgBox" id="listImg1">
            
            <el-carousel
              ref="carouselRef"
              direction="vertical"
              indicator-position="none"
              arrow="always"
              :autoplay="false"
              :interval="3000"
              height="320px"
            >
              <el-carousel-item v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[0]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[0].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{ TjzsList[0].type }}</span>
                  </p>
                </div>
                <div class="imgBox-item"  v-if="TjzsList[1]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[1].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[1].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[2]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[2]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[2].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[2].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[3]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[3].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[3].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[4]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[4]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[4].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[4].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[5]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[5].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[5].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[6]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[6]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[6].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[6].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[7]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[7].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[7].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[8]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[8]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[8].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[8].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[9]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[9].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[9].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[10]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[10]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[10].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[10].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[11]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[11].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[11].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[12]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[12]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[12].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[12].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[13]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[13].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[13].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
              <el-carousel-item  v-if="TjzsList[14]" v-for="item in 1" :key="item">
                <div class="imgBox-item"  v-if="TjzsList[14]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[14].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[14].type}}</span>
                  </p>
                </div>
                <div class="imgBox-item" v-if="TjzsList[15]">
                  <img
                    class="imgBox-img"
                    :src="TjzsList[15].url"
                    alt=""
                  />
                  <p class="imgBox-txt">
                    <span>{{TjzsList[15].type}}</span>
                  </p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
  
        <div class="downBox">
          <img
            @click="onNext()"
            class="downArrow"
            src="../../assets/images/anbao/down_arrow.png"
            alt=""
          />
        </div>
      </div>
      <!-- 地震灾害风险隐患点 -->
      <div class="imgShowBox">
        <subheadings :name="'地震灾害风险隐患点'" />
        <disaster :data="DangerPointsList"/>
      </div>
      <!-- 地震灾害风险隐患点评估报告 -->
      <div class="imgShowBox">
        <subheadings :name="'地震灾害风险隐患点评估报告'" />
        <p class="pStyle">
          <span  @click="downloadFile(ReportList)"> {{ReportList.name}}</span>
        </p>
      </div>
    </div>
  </template>
  <script setup>
  import { getTjzs, getDangerPoints, getReport } from '@/api/securityActivity.js';
  const { proxy } = getCurrentInstance();
  import disaster from "./disaster.vue";
  // 图件展示
const TjzsList=ref([])
// 地震灾害风险隐患点
const DangerPointsList=ref([])
// 地震灾害风险隐患点评估报告
const ReportList=ref('')
  // 轮播图对象
  const carouselRef = ref();
  // 上一张
  const onPrev = () => {
    carouselRef.value.prev();
  };
  // 下一张
  const onNext = () => {
    carouselRef.value.next();
  };
  getData()

function getData(){
  // 图件展示
  getTjzs({iaId:'123'}).then(res=>{
    TjzsList.value=res.data
    TjzsList.value.map((item)=>{
      item.url = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(item.url)
    })
  })
  
  // 地震灾害风险隐患点
  getDangerPoints({iaId:'123'}).then(res=>{
    DangerPointsList.value=res.data
  })
  getReport({iaId:'123'}).then(res=>{
    ReportList.value=res.data
  })
}

function downloadFile(file){
  location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadByUrl?url=" + encodeURIComponent(file.url);
  // downLoadFile({path:'/important',name:file}).then(res=>{
  // })
}

  // 初始化加载
  const init = () => {};
  </script>
  
  <style lang="scss" scoped>
  .imgShowBox {
    width: 450px;
    height: 460px;
    // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
    // opacity: .85;
    background: linear-gradient(
      135deg,
      rgba(0, 3, 45, 0.85) 0%,
      rgba(0, 12, 88, 0.85) 50%,
      rgba(0, 3, 45, 0.85) 100%
    );
    margin-bottom: 24px;
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 450px;
      height: 20px;
      background-size: 100% 100%;
      background-image: url("../../assets/images/common/bg_bottom.png") !important;
      position: absolute;
      bottom: -10px;
    }
    &:nth-child(2) {
      height: 240px;
    }
    &:nth-child(3) {
      height: 200px;
    }
    .upBox {
      width: 100%;
      text-align: center;
      .upArrow {
        margin: -34px 0 44px 0px;
        cursor: pointer;
      }
    }
    .downBox {
      width: 100%;
      text-align: center;
      .downArrow {
        margin: -54px 0 24px 0px;
        cursor: pointer;
      }
    }
    .imgtop {
      color: white;
      font-size: 20px;
    }
  
    .outBox {
      width: 100%;
      float: left;
      height: 320px;
      // overflow: hidden;
      overflow-y: auto;
      margin: -44px 0 34px 20px;
      .imgBox {
        height: 316px;
        &-item {
          padding-bottom: 20px;
          position: relative;
          height: 150px;
          margin-bottom: 12px;
        }
        &-img {
          width: 410px;
          height: 150px;
          display: block;
        }
        &-txt {
          position: absolute;
          bottom: -14px;
          left: 0px;
          width: 410px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          background: #475adb;
          span {
            display: block;
            height: 16px;
            font-size: 16px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #ffffff !important;
            line-height: 16px;
          }
        }
      }
    }
    .outBox::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .pStyle {
      padding: 0 20px;
      margin-top: -20px;
      span {
        width: 411px;
        height: 58px;
        font-size: 18px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #46ffff;
        border-bottom: 1px solid #46ffff;
        cursor: pointer;
      }
    }
  }
  </style>
  